import { defineComponent } from 'vue';
import useModule from './index.module';
import styles from './index.module.scss';

const Dialog = defineComponent({
  name: 'Dialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    /** Dialog 对话框 Dialog 的标题 */
    title: {
      type: String,
      default: ''
    },
    /** 对话框的宽度 */
    width: {
      type: String,
      default: '50%'
    },
    /** 是否需要遮罩层 */
    modal: {
      type: Boolean,
      default: true
    },
    /** Dialog 自身是否插入至 body 元素上 */
    appendToBody: {
      type: Boolean,
      default: false
    },
    /** 为 Dialog 启用可拖拽功能 */
    draggable: {
      type: Boolean,
      default: true
    },
    zIndex: {
      type: Number,
      default: 0
    }
  },
  setup(props, { emit, slots }) {
    const {
      dialogVisible,
      methods
    } =useModule(props, emit);
    return () => (
      <el-dialog
        title={props.title}
        width={props.width}
        v-model={dialogVisible.value}
        modal={props.modal}
        append-to-body={props.appendToBody}
        draggable={props.draggable}
        z-index={props.zIndex}
        custom-class={styles.lttDialog}
        before-close={methods.close}
      >
        {{
          header: () => slots.header?.(),
          default: () => slots.default?.(),
          footer: () => slots.footer?.(),
        }}
      </el-dialog>
    )
  }
});

export default Dialog;
